<template>
  <!-- TODO: 目前少 hover 效果 -->
  <footer
    class="mx-auto mt-5 flex h-24 max-w-screen-2xl flex-col items-center justify-center px-9"
  >
    <div class="mb-1">
      <!-- TODO: tailwind css 伪元素的使用 -->
      <!--  after:content 内容里面不能加逗号 -->
      <n-text class="after:mx-2 after:content-['@-Copyright-By']"
        >今日热榜</n-text
      >
      <n-text
        :depth="3"
        class="cursor-pointer transition-all delay-300 hover:text-red-400"
        >唐0205</n-text
      >
    </div>
    <n-text class="cursor-pointer text-xs transition-all delay-300" :depth="3"
      >豫ICP备2022018134号-1</n-text
    >
  </footer>
</template>

<script setup lang="ts">
onMounted(() => {})
</script>

<style lang="scss" scoped>
footer {
  max-width: 1800px;
}
</style>
